<template>
  <v-app>
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4>
            <v-card class="elevation-12">
              <v-toolbar dark color="primary">
                <v-toolbar-title>商品物流平台</v-toolbar-title>
                <v-spacer></v-spacer>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field prepend-icon="person" v-model="username" label="登录昵称" type="text" />
                  <v-text-field
                    prepend-icon="lock"
                    v-model="password"
                    label="密码"
                    id="password"
                    :append-icon="e1 ? 'visibility' : 'visibility_off'"
                    @click:append="() => (e1 = !e1)"
                    :type="e1 ? 'text' : 'password'"
                  ></v-text-field>
                  <v-text-field prepend-icon="person" v-model="truename" label="用户名" type="text" />
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" @click="register">注册</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-dialog v-model="dialog" width="300px">
      <v-alert icon="warning" color="error" :value="true">{{tooltip}}</v-alert>
    </v-dialog>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    username: "",
    password: "",
    truename: "",
    dialog: false,
    e1: false,
    tooltip: "用户名和密码不能为空"
  }),
  methods: {
    register() {
      if (!this.username || !this.password) {
        this.dialog = true;
        return false;
      }

      var data = { username: "123", password: "123", truename: "123", lx: 0 };
      // data.append(this.fileName, fileInput.files[0]);
      this.$http
        .post("/item/user/insert", data, {
          headers: { "Content-Type": "application/json" }
        })
        .then(res => {
          if (res.data) {
            this.tooltip = "注册成功，请登录";
             this.dialog = true;
            this.$router.push("/login");
          }
        })
        .catch(function(error) {
          // handle error
          console.log(error.response);
        });
    },

    doRegister() {
      this.$router.push("/register");
    }
  }
};
</script>
